import { Control } from 'ol/control'
/**
 * 播放控件
 */
export class PlaybarControl extends Control {
  /**
   * @param {Object} [opt_options] Control options.
   */
  constructor (_map, _options, _playCallBack, _speedSetCallBack) {
    const options = _options //  配置项

    let playContainer = document.createElement('div')
    playContainer.id = 'ol-play-control'
    playContainer.className = 'ol-play-control'

    super({
      element: playContainer,
      target: options.target
    })
    this.currentPos = 0
    this.palyStatus = false // 默认暂停
    this.currentSpeed = 1
    this.progressEle = null //  进度条
    this.progressTipContianerEle = null //  提示框
    this.playOptEle = null //  暂停、开始按钮
    this.speedTipEle = null//  提示框
    this.initPlay(playContainer)
    this.playCallBack = _playCallBack
    this.speedSetCallBack = _speedSetCallBack

    // this.actionOptions = actionOption
  }

  /**
   * 改变提示文字
   */
  setSeedTip (speed) {
    this.speedTipEle.innerText = `${speed}km/h`
  }

  setProgressEleWidth (pos) {
    if (this.progressEle && this.progressTipContianerEle) {
      this.currentPos = pos

      if (!this.palyStatus) {
        this.palyStatus = true
        this.playOptEle.className = `${this.palyStatus ? 'ol-opt-playing ol-play-opt' : 'ol-play-opt'}`
        // console.log('状态是false 时，this.palyStatus', this.palyStatus, pos, Math.round(pos))
      }

      // console.log('this.palyStatus', this.palyStatus)
      if (this.currentPos > 0 && Math.round(pos) < 100) {
        this.progressEle.style.width = this.currentPos + '%'
      } else if (this.currentPos === 0 || this.currentPos < 0) {
        this.progressEle.style.width = '0px'
      } else if (Math.round(pos) === 100 || Math.round(pos) > 100) {
        this.currentPos = 100
        this.progressEle.style.width = '100%'
        this.palyStatus = false
        this.playOptEle.className = `${this.palyStatus ? 'ol-opt-playing ol-play-opt' : 'ol-play-opt'}`
        // console.log('进入', this.palyStatus)
      }

      if (this.currentPos === 0 || this.currentPos < 0) {
        this.progressTipContianerEle.style.display = 'none'
      } else {
        this.progressTipContianerEle.style.display = 'block'
        let width = this.progressTipContianerEle.clientWidth
        // console.log('width=', width)
        this.progressTipContianerEle.style.left = width / 2 + 'px'
        // if (this.currentPos > 0 && this.currentPos < 100) {
        //   this.progressTipContianerEle.style.left = width / 2 + 'px'
        // } else if (this.currentPos === 0 || this.currentPos < 0) {
        //   this.progressTipContianerEle.style.left = '100px'
        // } else if (Math.round(pos) === 100 || Math.round(pos) > 100) {
        //   this.currentPos = 100
        //   this.progressEle.stylestyle.left = width + 'px'
        //   this.palyStatus = false
        // }
      }
    }
  }

  /**
   * 播放
   */
  initPlay (playContainer) {
    this.initPlayOptsContainer(playContainer)
    this.initProgressContainer(playContainer)
    this.initSpeedContainer(playContainer)
  }

  /**
   * 初始化播放、暂停box
   */
  initPlayOptsContainer (playContainer) {
    this.playOptEle = document.createElement('div') //  开启、停止按钮
    this.playOptEle.className = `${this.palyStatus ? 'ol-opt-playing ol-play-opt' : 'ol-play-opt'}`
    playContainer.appendChild(this.playOptEle)
    this.playOptEle.addEventListener('click', (e) => {
      // console.log('ss')
      this.palyStatus = !this.palyStatus
      this.playOptEle.className = `${this.palyStatus ? 'ol-opt-playing ol-play-opt' : 'ol-play-opt'}`
      // console.log('this.onPlay', this.playCall)
      this.playCallBack(this.palyStatus, this.currentPos)
    })
  }

  /**
   * 初始化进度条容器box
   * @param {*} playContainer
   */
  initProgressContainer (playContainer) {
    let progressContainerEle = document.createElement('div') //  进度条box容器
    progressContainerEle.className = 'ol-progress-container'
    this.progressEle = document.createElement('div') //  进度条容器
    this.progressEle.className = 'ol-progress'
    progressContainerEle.appendChild(this.progressEle) // 将进度条容器 写入 进度条box容器

    this.progressTipContianerEle = document.createElement('div') //  进度提示容器
    this.progressTipContianerEle.className = 'ol-progress-tip-container'
    this.progressTipContianerEle.innerText = '当前速度是'
    this.speedTipEle = document.createElement('div') //  速度容器
    this.speedTipEle.className = 'ol-progress-tip-speed'
    this.speedTipEle.innerText = '0km/h'

    this.progressEle.appendChild(this.progressTipContianerEle) // 将速度文字提示ele 写入 进度条

    this.progressTipContianerEle.appendChild(this.speedTipEle) // 将速度容器ele 写入 进度条
    playContainer.appendChild(progressContainerEle) // 进度条box容器 play控制器

    // setTimeout(() => {
    //   let width = this.progressTipContianerEle.clientWidth
    //   this.progressTipContianerEle.style.left = width / 2 + 'px'
    //   console.log('width', width)
    // }, 100)
  }

  /**
   * 初始化速度设置容器box
   * @param {*} playContainer
   */
  initSpeedContainer (playContainer) {
    let playSpeed = document.createElement('select') //  播放速度样式
    playSpeed.className = 'ol-speed'
    playSpeed.options.add(new Option('1x', 1))// 兼容所有浏览器
    playSpeed.options.add(new Option('1.5x', 1.5))// 兼容所有浏览器
    playSpeed.options.add(new Option('2x', 2))// 兼容所有浏览器
    playContainer.appendChild(playSpeed)
    playSpeed.addEventListener('change', (e) => {
      // console.log('选择 e', e, e.target.value)
      this.speedSetCallBack(e.target.value)
    })
  }
}
